<template>
	<view>
		<view class="bodyView">
			<view class="form">
				<view class="nameView">账户余额</view>
				<view class="balance">￥{{balance}}</view>
			</view>
			<view class="form">
				<view class="nameView">提现金额</view>
				<view class="valueView"> 
					<input type="text"/> <span>元</span>
				</view>
			</view>
			<view class="form">
				<view class="nameView">真实姓名</view>
				<view class="valueView">
					<input type="text"/>
				</view>
			</view>
			<view class="form">
				<view class="nameView">请选择银行</view>  
				<uni-data-select
					placeholder="请选择银行"
					class="bank"
				      v-model="bank"
				      :localdata="bankList"
				      @change="change"
				    ></uni-data-select>
			</view>
			<view class="form">
				<view class="nameView">请输入银行卡号</view>
				<view class="valueView">
					<input class="input3" type="text"/>
				</view>
			</view>
			<view class="infoView">车联网服务平台不会通过任何骤道泄需您的个人信息，请放心填写</view>
			<button class="btn-submit" @click="submit">确认信息并提交</button>
		</view>
		<view class="bodyView">
			<view class="titleView">提现记录</view>
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="lestLeft">
					<view class="name">{{item.name}}</view>
					<view class="time">核销时间：{{item.time}}</view>
				</view>
				<view class="rightLeft">
					<view class="price">- {{item.price}}</view>
					<view class="status">{{item.status}}</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],//提现记录数组
				bankList:[],//银行数组
				balance:"1500.00",//余额
			}
		},
		onLoad() {
			this.getDataList()
			this.getBankList()
		},
		methods: {
			getBankList(){
				this.bankList=[{
					"value":1,
					"text":"工商银行"
				},{
					"value":2,
					"text":"人民银行"
				},{
					"value":3,
					"text":"农业银行"
				},{
					"value":4,
					"text":"建设银行"
				}]
			},
			getDataList() {
				this.dataList = [{
					"id": 1234567,
					"name": "商家提现申请",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status": "审核中"
				}, {
					"id": 1234567,
					"name": "商家提现申请",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status": "审核中"
				}, {
					"id": 1234567,
					"name": "商家提现申请",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status": "审核中"
				}, {
					"id": 1234567,
					"name": "商家提现申请",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status": "审核通过"
				}, {
					"id": 1234567,
					"name": "商家提现申请",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status": "审核中"
				}, {
					"id": 1234567,
					"name": "商家提现申请",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status": "审核通过"
				}]
			},
			submit(){
				uni.navigateTo({
					url:"/packagesRevenue/withdrawSubmit/withdrawSubmit"
				})
			},
			change(){}
		}
	}
</script>

<style>
	/* 提现表单开始 */
	.form{
		display: flex;
		padding: 20rpx;
		padding-left: 0;
		font-size: 26rpx;
		font-weight: bold;
		align-items: center;
	}
	.nameView{
		width: 220rpx;
	}
	.balance{
		color: #FF6532;
		font-size: 30rpx;
	}
	.valueView{
		display: flex;
		align-items: center;
	}
	input{
		font-weight: normal;
		border-radius: 40rpx;
		border: #ededed 4rpx solid;
		padding: 8rpx;
		width: 200rpx;
	}
	.input3{
		width: 400rpx;
	}
	.valueView>span{
		padding-left: 10rpx;
	}
	.bank{
		border: #ededed 4rpx solid;
		border-radius: 40rpx;
		width: 300rpx;
		height: 70rpx;
		font-weight: normal;
		line-height: 65rpx;
	}
	.uni-select{
		border: none!important;
	}
	
	.infoView{
		font-size: 20rpx; 
		margin: 20rpx 0 40rpx 20rpx;
		color: #b9b9b9;
	}
	.btn-submit{
		border-radius: 40rpx;
		font-size: 28rpx;
		color: aliceblue;
		background-color: #2B7DF7;
		line-height: 80rpx;
		width: 500rpx;
	}
	/* 提现表单结束 */
	/* 提现记录列表开始 */
	.bodyView {
		margin: 0 auto;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 25rpx;
	}

	.titleView {
		font-size: 34rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: #f0f0f0 5rpx solid;
	}

	.list {
		padding: 20rpx 0;
		margin: 0 auto;
		border-top: #f0f0f0 5rpx solid;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.name {
		padding-bottom: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
	}

	.time {
		font-size: 24rpx;
		color: #b9b9b9;
	}

	.rightLeft {}

	.price {
		color: #FF6532;
		padding-bottom: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
	}

	.status {
		font-size: 24rpx;
		color: #b9b9b9;
	}

	/* 收支明细列表结束 */
</style>